रिएक्ट फ्रंट-एंड एप्लिकेशन के लिए यूजर इंटरफेस बनाने के लिए एक फ्रंट-एंड लाइब्रेरी है। इसके अलावा, रिएक्ट आपके एप्लिकेशन बनाते समय मददगार होता है क्योंकि यह पुन: प्रयोज्य घटकों का उपयोग करता है।  फ्रंट-एंड डेवलपर्स के लिए हमेशा मौजूद प्रश्न यह है कि बैकएंड कार्यात्मकताओं को लिखे या ज्ञान के बिना फॉर्म डेटा से अनुरोधों को कैसे संभालना है। बैकएंड सर्वर बनाना थकाऊ हो सकता है, और इस कार्य के लिए तर्क लिखने के दर्द को कम करने के लिए किसी तृतीय-पक्ष सेवा का उपयोग करना आवश्यक है।  ईमेलजेएस क्या है?  ईमेलजेएस एक ऐसी सेवा है जो क्लाइंट-साइड एप्लिकेशन जैसे रिएक्ट, वीयू और एंगुलर का उपयोग करके ईमेल भेजने में मदद करती है, जिसमें कॉन्फ़िगरेशन और सेटअप के दौरान कोई सर्वर नहीं होता है।  इस ट्यूटोरियल में, आप सीखेंगे कि एक फ्रंट-एंड लाइब्रेरी, रिएक्ट, को ईमेलजेएस के साथ कैसे जोड़ा जाए, ताकि आप अपनी वेबसाइट या मोबाइल एप्लिकेशन पर उपयोगकर्ता संदेश प्राप्त कर सकें, बिना खरोंच से निर्माण के तनाव के।  डेमो    में स्टार्टर कोड के साथ शुरुआत करें या एक नया रिएक्ट एप्लिकेशन बनाएं। इस रिपॉजिटरी  आवश्यक शर्तें  ट्यूटोरियल के साथ पालन करने के लिए, आपके पास निम्नलिखित होना चाहिए:    आपके स्थानीय मशीन पर स्थापित नोड>= 14.0.0 और npm>= 5.6  प्रतिक्रिया की मूल बातें की समझ  एक   सेवा को आज़माने के लिए। ईमेलजेएस खाता  शुरू करना  एक नई परियोजना के निर्माण का पहला कदम विकास के लिए उपकरण होना है जो इमारत को हवा देता है। अपने टर्मिनल में, यह कमांड चलाएँ:   npx create-react-app react-contact-form-with-emailjs  ऊपर दिया गया कमांड   कमांड का उपयोग करके बॉयलरप्लेट बनाता है जिसमें रिएक्ट ऐप के लिए सभी फाइलें और पैकेज होते हैं। क्रिएट-रिएक्शन-ऐप  ईमेलजेएस स्थापित करना  एक निर्भरता के रूप में, ईमेलजेएस एसडीके को रिएक्ट ऐप में स्थापित करने के लिए कमांड चलाएँ।   npm install @emailjs/browser  प्रोजेक्ट चलाना  रिएक्ट एप्लिकेशन को चलाने के लिए, प्रोजेक्ट डायरेक्टरी में नेविगेट करें और डेवलपमेंट सर्वर चलाएं जो हॉट रीलोड फीचर के साथ शिप करता है, जो बदले में, डेवलपमेंट के दौरान किए गए किसी भी बदलाव के साथ एप्लिकेशन को अपडेट करता है।  यह आदेश चलाएँ:   cd react-contact-form-with-emailjs npm start  एप्लिकेशन   पर उपलब्ध है। http://localhost:3000  संपर्क फ़ॉर्म बनाना  संपर्क फ़ॉर्म के माध्यम से अपने उपयोगकर्ताओं से प्रतिक्रियाएँ एकत्र करना और प्राप्त करना एक महत्वपूर्ण विशेषता है जो एक वेबसाइट के लिए आवश्यक है, क्योंकि यह आपको आगंतुकों की नज़र में भरोसेमंद बनाती है।  तो, चलिए संपर्क फ़ॉर्म बनाते हैं। अपनी App.js फ़ाइल में, निम्न कोड को कॉपी और पेस्ट करें:   // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;   संपर्क फ़ॉर्म को स्टाइल करना  एप्लिकेशन उपयोगकर्ता इंटरफ़ेस को उपयोगकर्ताओं के लिए सुंदर दिखने की आवश्यकता है, इसलिए   फ़ाइल में, निम्न कोड को कॉपी और पेस्ट करें: App.css   // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }  सब कुछ सही होने के साथ पेज इस तरह दिखना चाहिए:   सेटअप ईमेलजेएस  संदेश भेजने के लिए बिना किसी कार्यात्मकता के संपर्क फ़ॉर्म पृष्ठ के पूरा होने के साथ, आइए उस सेवा की स्थापना करें जो फ़ॉर्म की सामग्री को आपके ईमेल पर भेजेगी।   एक ईमेल सेवा जोड़ें  यह अनुभाग ईमेलजेएस और आपके ईमेल सर्वर के बीच एकीकरण के बारे में है। अपने ईमेलजेएस डैशबोर्ड पर,   टैब से   सेवा चुनें, जिसे एक नया पेज खोलना चाहिए जिसे   कहा जाता है।  ईमेल सेवा जीमेल कॉन्फिग सर्विस इसके बाद,   और   पैरामीटर बदलें।   का उपयोग बाद में संपर्क फ़ॉर्म को ईमेलजेएस से जोड़ने के लिए प्रारंभ करते समय किया जाएगा। अपने परिवर्तनों की पुष्टि करने के लिए   और   बटन पर क्लिक करना सुनिश्चित करें।  नाम सेवा आईडी सेवा आईडी कनेक्ट अकाउंट क्रिएट सर्विस   एक ईमेल टेम्पलेट बनाना  जब कोई उपयोगकर्ता आपकी वेबसाइट के क्लाइंट-साइड से संदेश भेजता है तो ईमेल टेम्प्लेट आवश्यक होता है जब आप ईमेल का विषय, उसमें शामिल सामग्री और आपके इनबॉक्स में उसके गंतव्य को शामिल करना चाहते हैं।  डैशबोर्ड पर,   पर क्लिक करें और   । ईमेल टेम्प्लेट टैब नया टेम्प्लेट बनाएं  इसके बाद, आपको   टैब पर क्लिक करना होगा और   और   को अपनी इच्छानुसार किसी भी चीज़ में बदलना होगा।   का उपयोग बाद में किया जाएगा, जैसा कि नीचे दी गई छवि में दिखाया गया है:  सेटिंग नाम टेम्पलेट आईडी टेम्प्लेट आईडी  सामग्री टैब पर वापस जाने पर, घुंघराले कोष्ठक के अंदर के मान गतिशील चर होते हैं जिनका वही मान होना चाहिए जो संपर्क फ़ॉर्म में   तत्व में परिभाषित किया गया है, जैसे   ,   , और   । <form> संदेश user_name user_email  पर्यावरण चर बनाना  पर्यावरण चर   एक फ़ाइल है जो आपकी सार्वजनिक कुंजी और अन्य मूल्यों को संग्रहीत करती है जिन्हें आप साझा नहीं करना चाहते हैं और यह केवल आपके लिए निजी है। .env  अपनी प्रोजेक्ट निर्देशिका के मूल में, एक फ़ाइल बनाएं,   , और निम्नलिखित पेस्ट करें: .env   // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY  सार्वजनिक कुंजी के लिए, आप इसे   टैब पर क्लिक करके और   अनुभाग में दिखाए गए मान की प्रतिलिपि बनाकर पा सकते हैं:  Account public key   ईमेलजेएस को इनिशियलाइज़ करें  रिएक्ट एप्लिकेशन में, स्थापित पैकेज,   पैकेज आयात करें। @emailjs/browser  निम्नलिखित को कॉपी और पेस्ट करें:   // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;   हैंडलिंग फॉर्म सबमिशन    हुक संपर्क फ़ॉर्म सबमिशन को संभालता है। useRef    फ़ाइल में कोड को कॉपी और अपडेट करें: App.js   // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;  उपरोक्त कोड में निम्नलिखित होता है:    हुक आयात किया जाता है और फॉर्म नामक एक चर के साथ आरंभ किया जाता है useRef  हुक,   , का उपयोग संदर्भ के रूप में किया जाता है और   तत्व को सौंपा जाता है useRef <form>    फ़ंक्शन पर, प्रपत्र में रोकथाम   विधि होती है जो पृष्ठ को रीफ़्रेश होने से रोकती है sendEmail preventDefault  फिर भी,     को   ,   ,   .   की वर्तमान संपत्ति और   के साथ प्रारंभ किया जाता है और प्रारंभ किया जाता है sendForm sendEmail service ID template ID form .current ref public key  सफलता और विफलता के मामलों के लिए कॉलबैक फ़ंक्शन जो   विधि के साथ होता है .then()  आइए अब इस परियोजना के परिणाम देखें:   पुष्टिकरण ईमेल    निष्कर्ष  अपने आवेदन के क्लाइंट-साइड पर डेटा अनुरोधों को संभालने के लिए ईमेलजेएस का उपयोग करना संपर्क फ़ॉर्म से प्रतिक्रिया प्राप्त करने का एक शानदार तरीका है। ईमेलजेएस आपके सर्वर का निर्माण किए बिना या बैकएंड विकास के ज्ञान के बिना आपको तलाशने के लिए अन्य सुविधाएं प्रदान करता है और आपको एक मजबूत अनुभव प्रदान करता है। यह हुड के तहत आपके लिए सब कुछ करता है।  क्या आपने पहले ईमेलजेएस का इस्तेमाल किया है? ऊपर मेरे दृष्टिकोण के बारे में आप क्या सोचते हैं? नीचे टिप्पणी करके हमें बताएं!

Initialized

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

प्रतिक्रिया में ईमेलजेएस के साथ संपर्क फ़ॉर्म को एकीकृत करना

प्रतिक्रिया में ईमेलजेएस के साथ संपर्क फ़ॉर्म को एकीकृत करना

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

डिजिटल खानाबदोशों सुनो: थाईलैंड के नए डीटीवी वीज़ा के बारे में आपको क्या जानना चाहिए

AI की शक्ति को उन्मुक्त करना। अत्याधुनिक तकनीकों की एक व्यवस्थित समीक्षा: सार और परिचय

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

डिजिटल खानाबदोशों सुनो: थाईलैंड के नए डीटीवी वीज़ा के बारे में आपको क्या जानना चाहिए

AI की शक्ति को उन्मुक्त करना। अत्याधुनिक तकनीकों की एक व्यवस्थित समीक्षा: सार और परिचय

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps